.hide {
    display: none !important;
}

.more-overflow-ellipsis {
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 需要显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 手指手势 */
.pointer {
    cursor: pointer;
}


/* 文字内容超出容器宽度变为省略号 */
.overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 图片自适应，保持原比例不剪切 */
.responsive-img {
    display: block;
    width: 100%;
}

/* 图片自适应，不保持原比例、剪切 */
.responsive-img-fit {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 清除浮动 */
.clearfix:after, .clearfix:before {
    display: table;
    content: " ";
}

.clearfix:after {
    clear: both;
}

/* 左浮动 */
.float-l {
    float: left;
}

/* 右浮动 */
.float-r {
    float: right;
}

/* 文字左对齐 */
.text-l {
    text-align: left;
}

/* 文字右对齐 */
.text-r {
    text-align: right;
}

/* 文字居中对齐 */
.text-c {
    text-align: center;
}

/**************************** reset **********************/
body {
    margin: 0;
}

img {
    border: none;
}

p {
    margin: 0;
    padding: 0;
}

h4,
h5,
h6 {
    font-size: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: unset;
  padding: 0;
  margin: 0;
}

address,
cite,
dfn,
em,
var,
i {
  font-style: normal;
    font-style: normal;
}

button,
input,
select,
textarea {
    font-size: 100%;
}

/* 使得表单元素在 ie 下能继承字体大小 */
input,
button,
textarea,
select,
optgroup,
option {
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

em,
strong {
    font-style: normal;
    font-weight: normal;
}

li,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/******************* color / background color **********************/

/* 由于var的兼容性限制，这个非常有意思的CSS技巧还不太适合在大型对外项目中使用 */
body {
  --blue: #58A5FF;
  --red: #F76E6E;
  --black: #333;
  --green: #3DABC4;
  --yellow: #FFE500;
  --white: #fff;
  --pink: #ffb6c1;
  --grey: #eee;
  --yellow: #FFE500;
  --borderColor: #818181;
}

.blue {
    color: var(--blue);
}

.red {
    color: var(--red)
}

.black {
    color: var(--black);
}

.green {
    color: var(--green);
}
.green1 {
    color: #5e9f8e;
}
.green2 {
    color: #8cbaae;
}

.yellow {
    color: var(--yellow);
}

.white {
    color: var(--white);
}

.pink {
    color: var(--pink)
}

.grey {
    color: var(--grey)
}

.blue-bg {
    background-color: var(--blue);
}

.red-bg {
    background-color: var(--red);
}

.white-bg {
    background-color: var(--white);
}

.black-bg {
    background-color: var(--black);
}

.pink-bg {
    background-color: var(--pink);
}

.grey-bg {
    background-color: var(--grey);
}

.yellow-bg {
    background-color: var(--yellow);
}

.green-bg {
    background-color: var(--green);
}

/******************* flex (flex不适用IE11以下，注意兼容) *************/
.flex-row-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* 垂直、水平居中 */

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 水平方向，间距等宽 */
.flex-row-space-between {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 水平方向，等距包围 */
.flex-row-space-around {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

/* 垂直居中 */
.flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/******************* display *************/
/* 行内元素 */
.inline {
    display: inline;
}

/* 行内块元素 */
.inline-block {
    display: inline-block;
    vertical-align: top;
}

/* 块状元素 */
.block {
    display: block;
}

/* 垂直方向，中部对齐 */
.vertical-middle {
    vertical-align: middle !important;
}

/* 底部对齐 */
.vertical-bottom {
    vertical-align: bottom !important;
}


/******************** 边框 ****************/
/* 全边框 */
.border {
    border: 1px solid var(--borderColor);
}

/* 底边框 */
.border-b {
    border-bottom: 1px solid var(--borderColor);
}

/* 上边框 */
.border-t {
    border-top: 1px solid var(--borderColor);
}

/* 左边框 */
.border-l {
    border-left: 1px solid var(--borderColor);
}

/* 右边框 */
.border-r {
    border-right: 1px solid var(--borderColor);
}

/********** Font Size（字体）12 ~ 30 *********/
/* 加粗 */
.bold {
    font-weight: bold;
}

.fs12 {
    font-size: 12px;
}

.fs14 {
    font-size: 14px;
}

.fs16 {
    font-size: 16px;
}

.fs18 {
    font-size: 18px;
}

.fs20 {
    font-size: 20px;
}

.fs22 {
    font-size: 22px;
}

.fs24 {
    font-size: 24px;
}

.fs26 {
    font-size: 26px;
}

.fs28 {
    font-size: 28px;
}

.fs30 {
    font-size: 30px;
}

.fs36 {
    font-size: 36px;
}

/********** Border radius（圆角） *********/
.radius0 {
    border-radius: 0px !important;
}

.radius {
    border-radius: 4px;
}

.border-clear {
    border: initial !important; /*border 默认值*/
}

.circle {
    border-radius: 100%;
}

/********** Margin 0 ~ 40 *********/
.mt0 {
    margin-top: 0px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.mt35 {
    margin-top: 35px;
}

.mt40 {
    margin-top: 40px;
}

.mr0 {
    margin-right: 0px;
}

.mr5 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px;
}

.mr15 {
    margin-right: 15px;
}

.mr20 {
    margin-right: 20px;
}

.mr25 {
    margin-right: 25px;
}

.mr30 {
    margin-right: 30px;
}

.mr35 {
    margin-right: 35px;
}

.mr40 {
    margin-right: 40px;
}

.mb0 {
    margin-bottom: 0px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb35 {
    margin-bottom: 35px;
}

.mb40 {
    margin-bottom: 40px;
}

.ml0 {
    margin-left: 0px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml15 {
    margin-left: 15px;
}

.ml20 {
    margin-left: 20px;
}

.ml25 {
    margin-left: 25px;
}

.ml30 {
    margin-left: 30px;
}

.ml35 {
    margin-left: 35px;
}

.ml40 {
    margin-left: 40px;
}

/********** Padding 0 ~ 40 *********/
.pt0 {
    padding-top: 0px;
}

.pt5 {
    padding-top: 5px;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.pt20 {
    padding-top: 20px;
}

.pt25 {
    padding-top: 25px;
}

.pt30 {
    padding-top: 30px;
}

.pt35 {
    padding-top: 35px;
}

.pt40 {
    padding-top: 40px;
}


.pr0 {
    padding-right: 0px;
}

.pr5 {
    padding-right: 5px;
}

.pr10 {
    padding-right: 10px;
}

.pr15 {
    padding-right: 15px;
}

.pr20 {
    padding-right: 20px;
}

.pr25 {
    padding-right: 25px;
}

.pr30 {
    padding-right: 30px;
}

.pr35 {
    padding-right: 35px;
}

.pr40 {
    padding-right: 40px;
}

.pb0 {
    padding-bottom: 0px;
}

.pb5 {
    padding-bottom: 5px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb15 {
    padding-bottom: 15px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb25 {
    padding-bottom: 25px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb35 {
    padding-bottom: 35px;
}

.pb40 {
    padding-bottom: 40px;
}

.pl0 {
    padding-left: 0px;
}

.pl5 {
    padding-left: 5px;
}

.pl10 {
    padding-left: 10px;
}

.pl15 {
    padding-left: 15px;
}

.pl20 {
    padding-left: 20px;
}

.pl25 {
    padding-left: 25px;
}

.pl30 {
    padding-left: 30px;
}

.pl35 {
    padding-left: 35px;
}

.pl40 {
    padding-left: 40px;
}
